<template>
  <div class="context">
    <div class="title">热销爆款</div>
    <div class="goodlist">
      <goodItem
        v-for="(item, index) in searchList"
        :key="index"
        :item="item"
      ></goodItem>
    </div>
    <div class="title">猜你想看</div>
    <div class="goodlist">
      <goodItem
        v-for="(item, index) in liveList"
        :key="index"
        :item="item"
      ></goodItem>
    </div>
  </div>
</template>
<script setup>
import goodItem from "../components/gooditem.vue";
import { useUser } from "../store/user";
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import request from "../utils/request";

const route = useRoute();
const store = useUser();
const searchList = ref([]);
const liveList = ref(store.goodsList);

function search() {
  request.get("/goods?name=" + route.query.search).then((res) => {
    console.log(res);
    searchList.value = res.data;
  });
}
onMounted(() => {
  search();
});
</script>

<style scoped>
.context {
  width: 80%;
  margin: 10px auto;
}
.title {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
.goodlist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>
